<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layui/others/dtree/dtree.css">
    <link rel="stylesheet" href="/static/layui/others/dtree/font/dtreefont.css">
    <title>各级供电单位的计量设备停留时间</title>
    <!--依据各级供电单位的不同类别、型号、批次的计量设备，分析展示计量设备在不同状态时的平均停留时间及单个设备停留时间 2-->
<body>
<div class="layui-col-md3" style="height: 96vh;overflow: auto;">
    <div>
        <ul id="iframeTree2" class="dtree" data-id="00"></ul>
    </div>
</div>
<div class="layui-col-md9">
    <div class="layui-tab layui-tab-card " lay-allowclose="true" lay-filter="content-tab">
        <ul class="layui-tab-title" id="content_div_card_title">
            <li class="layui-this">首页
                <i class="layui-icon layui-unselect layui-tab-close"></i></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-colla-content  layui-show">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 100px;">
                                    <input type="text" name="searchInput" autocomplete="on"
                                           class="layui-input" placeholder="请输入名称">
                                </div>
                                <div class="layui-form-mid layui-word-aux">省/市/区(县)</div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" id="search_btn" class="layui-btn layui-btn-sm">搜索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var $, element, layer, dtree;
    layui.extend({
        dtree: '{/}/static/layui/others/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['dtree','layer','jquery','element'], function(){
        $ = layui.jquery;
        element = layui.element;
        layer = layui.layer;
        dtree = layui.dtree;
        // 树代码示例，此处无需启用iframe
        var iframeTree2=dtree.render({
            elem: "#iframeTree2",
//            url: "/static/layui/others/test.json",
            data: [[${devRegion}]],
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"total",statusName:"total",statusCode:"200",rootName:'rows',
                treeId:"id",parentId:"p_id",title:"name"},  //修改response中返回数据的定义
            record: true, //开启数据记录模式
            method: "GET",
            initLevel: 2,
            select: false, //指定下拉树模式
            width :"100%",
            none: "加载中"

        });
        //搜索
        $("#search_btn").click(function(){
            layer.load(2, {time: 399});
            var input = $("input[name='searchInput']").val();
            iframeTree2.fuzzySearch(input);
            iframeTree2.fuzzySearch(input, true);
        });
        // 绑定节点的单击事件
        dtree.on("node('iframeTree2')", function(obj){
            layer.tips(obj.param.recordData.code, this, {tips: [4, '#646464']});
            // 当前节点为最后一级节点时触发事件
            if (obj.param.leaf || obj.param.level==="3") {
                openTab(obj.param);
            }
        });
        function openTab(param){
            // 匹配选项卡是否存在
            var matchTo, tabs = $('#content_div_card_title>li');
            tabs.each(function(index){
                var li = $(this), layid = li.attr('lay-id');
                if( layid ===  param.nodeId){
                    matchTo = true; return;
                }
            });

            // 如果未在选项卡中匹配到，则追加选项卡
            if(!matchTo){
                element.tabAdd("content-tab",{
                    id: param.nodeId,
                    title: param.context,
                    content: "<iframe style='height: 90vh;width:100%;'  src='/devices?devicesStateDepTab&code=" +param.recordData.code+"'"+
                    " id='context_iframe' name='context_iframe' frameborder='0'></iframe>"
                });
            }

            // 定位当前tabs
            element.tabChange("content-tab", param.nodeId);
        }
    });

</script>

</body>
</html>